<template>
  <el-menu class="el-menu-vertical-demo" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff" :collapse="!$store.state.isCollapse" :collapse-transition="false">
    <h3>{{ $store.state.isCollapse ? '后台管理' :'后台' }}</h3>
    <el-menu-item v-for="item in noChilder()" :key="item.path" :index="item.label" @click="clickMenu(item)">
      <component class="icon" :is="item.icon"></component>
      <span>{{ item.label }}</span>
    </el-menu-item>
    <el-sub-menu v-for="item in hasChilder()" :key="item.path" :index="item.path">
      <template #title>
        <component class="icon" :is="item.icon"></component>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="(item2,i) in item.children " :index="item2.path" @click="clickMenu(item2)" :key="i">
          <component class="icon" :is="item2.icon"></component>
          <span>{{ item2.label }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>

  </el-menu>
</template>
<script>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
  setup() {
    const list = [
      {
        path: '/home',
        name: 'home',
        label: '首页',
        icon: 'HomeFilled',
        url: 'Home/Home'
      },
      {
        path: '/mall',
        name: 'mall',
        label: '商品管理',
        icon: 'video-play',
        url: 'MallManage/MallManage'
      },
      {
        path: '/user',
        name: 'user',
        label: '用户管理',
        icon: 'user',
        url: 'UserManage/UserManage'
      },
      {
        label: '其他',
        icon: 'location',
        path: '/other',
        children: [
          {
            path: '/page1',
            name: 'page1',
            label: '页面1',
            icon: 'setting',
            url: 'Other/PageOne'
          },
          {
            path: '/page2',
            name: 'page2',
            label: '页面2',
            icon: 'setting',
            url: 'Other/PageTwo'
          }
        ]
      }
    ]
    // 定义vuex
    const store = useStore()
    // 定义router
    const router = useRouter()
    // 点击登录时传过来的list
   const asynclist = store.state.Menu 
    //过滤出没有子路由的路由数组
    const noChilder = () => {
      return asynclist.filter(item => !item.children)
    }
    //过滤具有子路由的路由数组
    const hasChilder = () => {
      return asynclist.filter(item => item.children)
    }
    //点击路由跳转
    const clickMenu = (item) => {
      router.push({name: item.name})
      // router.push(item.path)
      //vuex面包屑
      store.commit("selectMenu", item)
      store.commit("addMenu", router)
    }

    return {
      noChilder,
      hasChilder,
      clickMenu
    }
  }
}
</script>
<style lang="less" scoped>
.icon {
  width: 18px;
  height: 18px;
}
.el-menu {
  height: 100vh;
  border-right: none;
  h3 {
    color: white;
    padding: 10px;
    font-weight: bold;
    text-align: center;
  }
}
</style>